import {
  RouteItemStateArr,
  RouteItemMap,
} from "../../config/RouteMap";
import { type RouteItemState } from "../../type/route";
import { useEffect, useState } from "react";
import styles from "./style.module.scss";
import { useLocation, useNavigate } from "react-router-dom";
import logo from "../../static/logo.svg"
export default function SideBar(): JSX.Element {
  const [myRouteChosenItem, setMyRouteChosenItem] = useState<string>(RouteItemStateArr[0].iconName);
  const myLocation = useLocation();
  const myNavigate = useNavigate();
  useEffect(() => {
    const res = RouteItemMap?.get(myLocation.pathname.slice(1));
    if (res !== undefined) {
      setMyRouteChosenItem(res);
    }
  }, [myLocation]);
  function changeState(r: RouteItemState) {
    if (r.iconName !== myRouteChosenItem) {
      setMyRouteChosenItem(r.iconName);
      myNavigate(RouteItemMap?.get(r.iconName)!)
    }
  }
  return (
    <div className={styles.sidebar}>
           <embed style={{height:"150px",width:"150px"}} src={logo} />
      {RouteItemStateArr.map(v => (
        <div
          id={styles?.[v.iconName === myRouteChosenItem ? "choosed" : ""]}
          className={styles.iconBox}
          onClick={() => {
            changeState(v);
          }}
        >
          {v.iconElement}
          {v.iconName}
        </div>
      ))}
    </div>
  );
}
